<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <div class="tools-select">
          <el-button
            type="info"
            size="mini"
            icon="el-icon-plus"
            @click="handleAdd"
            v-if="$store.getters.roles.includes('SYS_SKILL_EDIT')"
          >编辑
          </el-button>
        </div>
      </div>
      <Treeselect
        v-model="categoryIds"
        :multiple="true"
        :disabled="true"
        :options="options"
        placeholder="请选择专业分类"
      />
    </el-card>
    <EditDialog ref="edit" @onCallBack="handleQuery"/>
  </div>
</template>

<script>
import { getMajorCategoryIds } from '@/api/sysSkill'
import { getTree } from '@/api/sysMajorCategory'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import EditDialog from './components/EditDialog'

export default {
  components: { EditDialog, Treeselect },
  props: ['userId'],
  data() {
    return {
      options: [],
      categoryIds: null
    }
  },
  mounted() {
    this.handlerTree()
    this.handleQuery()
  },
  methods: {
    handleQuery() {
      getMajorCategoryIds(this.userId).then(res => {
        if (res.code === 20000 && res.data && res.data.length > 0) {
          this.categoryIds = res.data
        }
      })
    },
    handlerTree() {
      getTree().then(res => {
        if (res.code === 20000 && res.data && res.data.length > 0) {
          this.options = res.data
        }
      })
    },
    handleAdd() {
      this.$refs['edit'].onShow(this.userId)
    }
  }
}
</script>
<style scoped>
.tb-table {
  width: 100% !important;
}

.app-container {
  height: 300px;
}

.el-card__header {
  padding: 10px 10px !important;
}

</style>
